<template>
	<view class="app-bill">
		<!-- <u-navbar :background="background"  :immersive="true" title="账单">
		</u-navbar> -->
			<view class="content">
				<!-- <view class="tab-navs">
					<scroll-view class="scroll-term_H" scroll-x="true"  :scroll-left="[index>3?(index-3)*140:0]">
						<block v-for="(item,ind) in tabObjectList" :key="ind">
							<view class="scroll-term-item_H" :class="index == ind ?'act':''" @tap="changItem(item,ind)">
								{{item[1]}}
							</view>
						</block>
					</scroll-view>
				</view> -->
				<template v-if="lists.length > 0">
					<view class="list" >
						<block v-for="(item,index) in lists" :key="index" v-if="lists.length">
							<view class="list-item">
								<view class="list-item-i">
									<view class="item-t">
										<!-- <image src="../../static/imgs/purse-top-logo.png" mode=""></image> -->
										<view class="item-h">
											<text class="item-h-text">{{item.typeStr || '-'}}</text>
											<text>{{item.time}}</text>
										</view>
									</view>
								</view> 
								 
								<view class="list-item-i list-item-i-b-t">
									<text class="list-item-i-b num" :class="[item.operate==1?'green':'red']">{{item.operate==1?'+':'-'}}{{item.num}} </text>
									<!-- <text v-if="item.amount && !(incomeId==61 ||incomeId==62 || incomeId==64|| incomeId==71 || incomeId==72)">≈ {{item.amount}}</text> -->
									<!-- <view></view> -->
									<text>{{item.status}}</text>
									<!-- <text v-if="false">≈ {{item.amount}}</text> -->
								</view>
								
								<!-- 
								 -->
							</view>
						</block>
					</view>
				</template>
				<template v-else>
					<view class="no-data">
						<image src="/static/imgs/nodata.png" mode="widthFix" lazy-load></image>
						<text>{{i18n.nodata}} </text>
					</view>
				</template>
			</view>
			
		<load v-if="showLoadings"></load>
	</view>
</template>

<script>
	import Load from "../../components/common/load.vue"
	import {fetch, showToast, pageback, pageto, forceUpdate, checkLogin} from '@/common/js/util.js'
	import {mapGetters} from 'vuex' 
	let timer;
	export default {
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getTextArr',
				'getLangType',
				'getLang'
			])
		},
		data() {
			return {
				background:'#ffffff',
				showLoadings:false,
				index: 0,
				tabObjectList: [],
				page:1,
				rows:10,
				incomeId:10,
				lists:[],
				isCheck:false,
				type:'',
				status:'',
				poundage:0,
				num:0,
				sun:''
			}
		},
		onLoad(){
			
			this.page = 1;
			this.lists =[];
			this.getJhings()
		},
		onShow(){
			uni.setNavigationBarTitle({
				title:this.getLangType=='en'?'Bill':this.getLangType=='chs'?'账单':'賬單'
			})
			// forceUpdate(this.getLangType);
			// this.getList();
		},
		onPullDownRefresh() {
					//下拉刷新的时候请求一次数据
					// // console.log('下拉了')
			this.page =1;
			this.lists =[]
			// if(this.incomeId=='13'){
				// this.getJhings();
				// return false;
			// }
		    // this.getThings();
		},
		onReachBottom() {
			let _self = this
				//触底的时候请求数据，即为上拉加载更多
				//为了更加清楚的看到效果，添加了定时器
		    if (timer != null) {
		        clearTimeout(timer);
		    }
		    timer = setTimeout(function() {
					_self.getJhings();
					
		        _self.getThings();
		    }, 1000);
					
					// 正常应为:
					// _self.getmorenews();
		},
		methods: {
			back() {
				pageback()
			},
			changItem(e,i){
				this.index = i;
				this.page=1;
				this.lists =[]
				this.incomeId = e[0];
				// if(this.incomeId=='13'){
				// 	this.getJhings(this.page,this.rows);
				// 	return false;
				// }
				this.getJhings(this.page,this.rows);
				// this.getThings(this.page,this.rows);
			},
			objectChange(e){
				// // console.log(e.tab.indexA);
				this.page=1;
				this.lists =[]
				this.incomeId = e.tab.indexA;
				this.getThings(this.page,this.rows);
			},
			getJhings(page = 1, rows = this.rows){
				
				 // hash  time  item.num  typeStr
				
				let url_ = "/api/wallet/zcmx";
				let data_ ={
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					type: this.incomeId,
					rows,
					page:this.page
				}
				if(this.isCheck) return;
				this.isCheck=true;
				// uni.showLoading()
				uni.hideLoading() 
				this.showLoadings = true;
				fetch(url_,data_,'POST').then(res=>{
					// console.log(og(res.data.data.sum,"2345653423")
					this.sun=res.data.data.sum
					// // console.log(res)
					uni.hideLoading() 	
					this.isCheck = false;
					this.showLoadings = false;
					// this.tabObjectList = Object.entries(res.data.data.type)
					// this.incomeId = this.tabObjectList[0][0]
					// // console.log(res.data.data.data.data.length);
					// checkLogin(this.getLoginInfo,this.getRequestUrl);
					if(res.data.data.length ==0){
						// showToast(this.i18n.nodata)
						uni.hideNavigationBarLoading();
						return;
					}
					if(res.data.code){
						res.data.data.forEach((item,index)=>{
							// item.num=Number(parseInt(item.num))
							item.poundage=Number(parseInt(item.poundage))
						})
						if(this.page ==1){
							this.page ++;
							uni.stopPullDownRefresh();
							this.lists = res.data.data;
							
							// console.log(og(this.lists,"lisRLDlist")
							// console.log(og(this.lists.status,"statatatatasta")
							this.lists.forEach((item,index)=>{
								// this.lists[index].num = parseFloat(item.num)
								// item.amount = parseFloat(item.amount)
								// this.lists[index].pcs = _self.i18n.BlockPackage
							})
							
						}else{
							this.page ++;
							let lists = res.data.data;
							lists.forEach((item,index)=>{
								// lists[index].num = parseFloat(item.num)
								// item.amount = parseFloat(item.amount)
								// lists[index].pcs = _self.i18n.BlockPackage
							})
							// this.day_sum = res.data.data.day_sum+"";
							this.lists = this.lists.concat(lists)
							// // console.log(this.lists)
						}
					}else{
						// uni.showToast(res.data.msg)
					}
				}).catch(err=>{
					this.isCheck = false;
					// uni.hideLoading()
					this.showLoadings = false;
					// uni.showToast(this.i18n.request_fail)
				})
			},
			getThings(page = 1, rows = this.rows){
				let url_ = "/api/User/detailed";
				let data_ ={
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					type: this.incomeId,
					rows,
					page:this.page
				}
				if(this.isCheck) return;
				this.isCheck=true;
				// uni.showLoading()
				this.showLoadings = true;
				fetch(url_,data_,'POST').then(res=>{
					// // console.log(res)
					// uni.hideLoading()
					this.isCheck = false;
					this.showLoadings = false;
					// this.tabObjectList = Object.entries(res.data.data.type)
					// this.incomeId = this.tabObjectList[0][0]
					// // console.log(res.data.data.data.data.length);
					// checkLogin(this.getLoginInfo,this.getRequestUrl);
					if(res.data.data.length ==0){
						// showToast(this.i18n.nodata)
						uni.hideNavigationBarLoading();
						return;
					}
					if(res.data.code){
						if(this.page ==1){
							this.page ++; 
							uni.stopPullDownRefresh();
							this.lists = res.data.data;
							// console.log(og(res);/
							this.lists.forEach((item,index)=>{
								this.lists[index].num = item.num
								// this.lists[index].pcs = _self.i18n.BlockPackage
							})
						}else{
							this.page ++;
							let lists = res.data.data;
							lists.forEach((item,index)=>{
								lists[index].num = item.num
								// lists[index].pcs = _self.i18n.BlockPackage
							})
							// this.day_sum = res.data.data.day_sum+"";
							this.lists = this.lists.concat(lists)
							// // console.log(this.lists)
						}
					}else{
						// uni.showToast(res.data.msg)
					}
				}).catch(err=>{
					this.isCheck = false;
					// uni.hideLoading()
					this.showLoadings = false;
					uni.showToast(this.i18n.request_fail)
				})
			}
		},
		components: {
			Load
		}
	}
</script>
<style>
	page{
		background: #ffffff !important;
	}
</style>
<style lang="scss">
	@import  '@/common/scss/variable.scss';
	@import  '@/common/scss/global.scss';
	
	.nav-bar{
		padding: 0 30rpx;
		image{
			width: 48rpx;
			height: 48rpx;
			flex-shrink: 0;
		}
	}
	.amount , .status{
		font-size: 26rpx;
		margin-top: 10rpx;
	}
	.no-data{
		margin-top: 130upx;
		text-align: center ;
		image{
			margin: 0 auto 20rpx;
			width: 500upx;
			height: 400upx;
			flex-shrink: 0;
		}
		text{
			display: block;
			font-size: 26rpx;
			color: #BED0DC;
		}
	}
	.app-bill {
		.content {
			padding-top: 22rpx;
			.tab-navs{
				display: flex;
				// border-bottom:2upx solid #f0f0f0;
				font-size: 36rpx;
				padding-left: 30upx;
				// justify-content: space-between;
				
				.scroll-term-item_H {
					display: inline-block;
					box-sizing: border-box;
					margin-right: 64upx;
					// padding:0 5upx;
					text-align: center;
					font-weight: bold;
					color: #8f9ba9;
					&.act{
						color: #022347;
						// border-bottom:6upx solid $theme-color;
						position: relative;
						&::after{
							content: '';
							width: 144upx;
							height: 4upx;
							background-color: #087BF9;
							position: absolute;
							left: 50%;
							bottom:0;
							transform: translate(-50%,0);
						}
					}
				}
				.scroll-term_H {
					white-space: nowrap;
					width: 100%;
					box-sizing: border-box;
					.fund-term-item-title{
						color: #FFFFFF;
						font-size: 30rpx;
						font-weight: bold;
						margin-bottom: 34upx;
					}
					text{
						display: block;
						color: #FFFFFF;
						font-size:28upx;
					}
				}
				
				
				view{
					flex:1;
					text-align: center;
					line-height: 74upx;
					font-size: 36rpx;
					&.act{
						color: #022347;
						// border-bottom:6upx solid $theme-color;
						position: relative;
						&::after{
							content: '';
							width: 150upx;
							height: 6upx;
							background-color: #087BF9;
							position: absolute;
							left: 50%;
							bottom:0;
							transform: translate(-50%,0);
						}
					}
				}
			}
			.list{
				margin-top: 80rpx;
				// margin: 40upx 30upx 0;
				// margin-right: 10rpx;
				.list-item{
					background-color: #ffffff;
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 152upx;
					margin-bottom: 20upx;
					border-radius: 10upx;
					padding: 40rpx 30rpx;
					// background-image: url(../../static/imgs/qutation-bg2.png);
					background-size:cover ;
					// margin-right: 10rpx;
					border-bottom:1rpx solid #edf1f4;
					// &:last-child{
					// 	border-bottom:none;
					// }
					.list-item-i{
						flex: 1;
						
						&:last-child{
							text-align: right;
						}
						.list-item-i-b-t{
							text{
								display: block;
								font-size: 24rpx;
								color: #8f9ba9;
								display: block;
								line-height: 36rpx;
							}
						}
						.list-item-i-b{
							font-weight: bold;
							// font-size: 30rpx;
							// color: #022347;
							// margin-bottom: 10rpx;
							
							margin-bottom: 10rpx;
							// margin: 0;
							font-size: 32rpx;
							line-height: 48rpx;
							display: block;
							color: #022347;
							&.red{
								color: red;
							}
							&.green{
								color: green;
							}
						}
						.status{
							margin-top: 10rpx;
							font-size: 26rpx;
						}
						text{
							display: block;
							font-size: 28rpx;
							color: #8f9ba9;
							line-height: 36rpx;
							// color: $white;
						}
						.item-t{
							overflow: hidden;
							display: flex;
							align-items: center;
							image{
								width: 48upx;
								height: 48upx;
								margin-right: 30upx;
							}
							.item-h{
								text{
									display: block;
									font-size: 24rpx;
									color: #8f9ba9;
									display: block;
									line-height: 36rpx;
								}
								
								.item-h-text{
									margin-bottom: 16rpx;
									// margin: 0;
									font-size: 28rpx;
									line-height: 42rpx;
									display: block;
									color: #022347;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
